 
<!-- 邹光义
 <template >
   
    <div >

    <h1 style="color:black;  text-align: center;">重工实验室辅助管理平台</h1>
    <div class="main-content-agileits">
       
        <div class="left-text-w3ls">
            <img src="./Image/VCG211415441311.jpg" alt="er">
            <h3>Subscribe to our newsletter</h3>
            <p><a class="fas fa-check" aria-hidden="true"></a>Subscribe today to receive updates on the latest news!</p>
            <p><a class="fas fa-check" aria-hidden="true"></a>We will send you a periodic updates.</p>
            <p><a class="fas fa-check" aria-hidden="true"></a>And Many More Informations. </p>
            <p><a class="fas fa-check" aria-hidden="true"></a>We respect your privacy. </p>

        </div>
      
        <div class="login-w3l">
            <div class="top-img-agileits-w3layouts">
                <div class="w3_pad">

                    <h2 class="sub-head-w3-agileits">Subscribe Now</h2>
                    <p> To get Articles and Case Studies Directly To Your Mail</p>

                    <div class="login-form">
                        <div>
                            <div class="w3_lb">
                               
                            </div>
                            <div style="height: 300px;">
                            <input type="text" class="one" name="text"  v-model="Number"  placeholder="Enter Your Number" >
                            <input type="password" class="two" name="password" v-model="Password"  placeholder="Enter Your PassWord" >
                            <button  class="three" @click="Login()">Sign in</button>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="w3_soc">
                    <h3>Follow Us On</h3>
                    <div class="footer-social">

                        <ul>
                            <li>
                                <a href="#">
								<i class="fab fa-facebook-f icon_facebook"></i>
							</a>
                            </li>
                            <li>
                                <a href="#">
								<i class="fab fa-twitter icon_twitter"></i>
							</a>
                            </li>
                            <li>
                                <a href="#">
								<i class="fab fa-dribbble icon_dribbble"></i>
							</a>
                            </li>
                            <li>
                                <a href="#">
								<i class="fab fa-google-plus-g icon_g_plus"></i>
							</a>
                            </li>

                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>

    <div class="footer-agileits">
        <p>© 2018 Quirky Subscribe Form. All Rights Reserved | Design by <a href="http://w3layouts.com/"> W3layouts</a></p>
    </div>
    
</div>

</template>
 
<script>

import service from '@/request';
   
export default {
        data() {
            return {
                Number:'',Password:'',
                overlaylong: 'overlaylong',
                overlaytitle: 'overlaytitle',
                disfiex: 0
            }
        },
        methods: {
           
            async Login() {
                try {
                    // 发送登录请求
                    // const response = await service.post(`https://localhost:7166/api/User/Login`, {
                    //     num: this.Number,
                    //     password: this.Password
                    // });
                    const response = await service.post(`https://localhost:7166/api/User/Login`, {
                        num: '2199710',
                        password: '123456'
                    });
                    console.log('1'); // 添加这一行以确认导航开始
                    // 检查响应状态
                    if (true) {
                        console.log('2'); // 添加这一行以确认导航开始
                        // 检查响应数据中的 outcome 字段
                        if (true) {
                            console.log(response); // 添加这一行以确认导航开始
                            // 存储用户信息
                            localStorage.setItem('userId', response.userId);
                            localStorage.setItem('userName', response.userName);
                            localStorage.setItem('token', response.token);

                            console.log('User information stored in localStorage'); // 添加这一行以确认信息已存储

                            // 打印用户信息
                            console.log(response.userId, response.userName, response.token);

                            // 跳转到首页
                            console.log('Navigating to /HelloWorld'); // 添加这一行以确认导航开始
                            this.$router.push({ path: '/HelloWorld' });
                            console.log('Navigation completed'); // 添加这一行以确认导航完成
                            return true;
                        } else {
                            alert("密码或者账户错误");
                            return false;
                        }
                    } else {
                        alert('登录失败，服务器响应状态码：' + response.status);
                        return false;
                    }
                } catch (error) {
                    console.error('登录失败', error);
                    alert('登录失败，请检查网络连接');
                    return false;
                }
            },
            Signin() {
                this.overlaylong = "overlaylongleft"
                this.overlaytitle = "overlaytitleright"
                setTimeout(() => {
                    this.disfiex = 1
                }, 200)
            },
            Signup() {
                this.overlaylong = "overlaylongright"
                this.overlaytitle = "overlaytitleleft"
 
                setTimeout(() => {
                    this.disfiex = 0
                }, 200)
 
            }
        }
    }
</script>

<style scoped>
.one{
    outline: none;
    margin-bottom: 15px;
    font-size: 16px;
    color: #999;
    text-align: left;
    padding: 14px 20px;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    border: 1px solid #e5e5e5;
}
.two{
    outline: none;
    margin-bottom: 15px;
    font-size: 16px;
    color: #999;
    text-align: left;
    padding: 14px 20px;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    border: 1px solid #e5e5e5;
}
.three{
    font-size: 18px;
    color: #fff;
    width: 100%;
    background: rgb(170, 221, 199);
    border: none;
    padding: 14px 15px;
    font-weight: 500;
    transition: .3s ease;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -ms-transition: .3s ease;
    -o-transition: .3s ease;
}
/*
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
/*--reset--*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/*--start editing from here--*/
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*--end reset--*/
body {
    font-family: 'Montserrat', sans-serif;
	background-color:#2292a7;
	text-align:center;
}
h1,h2,h3,h4,h5,h6{
	font-family: 'Montserrat', sans-serif;
}
.top-img-agileits-w3layouts {
    background:#fff;
   
}
.w3_pad {
    padding: 3em 2em 0;
}
/**** LOGIN_SIGNUP ******/
.main-content-agileits {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2em;
    background: rgba(255, 255, 255, 0.18);
}
.left-text-w3ls {
    float: left;
    width: 58%;
    padding-right: 1em;
    text-align: left;
	box-sizing: border-box;
}
.left-text-w3ls h3 {
    font-size: 2em;
    color: #000000;
    font-weight: 500;
    letter-spacing: 2px;
    margin: 0.5em 0 0.5em;
}
.left-text-w3ls a {
    padding-right: 8px;
    font-size: 9px;
}
.w3_soc {
    padding: 1.5em 5em 1.5em 2em;
    background-color: rgba(153, 153, 153, 0.23);
}
form {
    margin: 35px 0;
}
.left-text-w3ls p {
    color: #000000;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 38px;
    font-weight: 100;
}
.w3_lb label {
    color: #ff0000;
    font-weight: 500;
    font-size: 20px;
}
.left-text-w3ls p a.fa {
    color: #b52e31;
    font-size: 11px;
    vertical-align: middle;
    margin-right: 1em;
}
/* signup Form styles */

h2.sub-head-w3-agileits span {
    font-weight: 100;
    display: block;
    font-size: 15px;
}
.top-img-agileits-w3layouts h2 {
    font-size: 30px;
    letter-spacing: 1px;
    font-weight: 500;
	color:#000;
	text-align: left;
}
.top-img-agileits-w3layouts p {
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 500;
    text-align: left;
    color: rgba(119, 119, 119, 0.61);
    margin-top: 15px;
}

.w3l-mockup-form input[type="text"],
.w3l-mockup-form input[type="password"] {
    outline: none;
    margin-bottom: 15px;
    font-size: 16px;
    color: #999;
    text-align: left;
    padding: 14px 20px;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    border: 1px solid #e5e5e5;
}
.login-w3l {
    width: 40%;
    float: right;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.53);
    -webkit-box-shadow: 10px 10px 16px 0px rgba(255, 255, 255, 0.1);
    -moz-box-shadow: 10px 10px 16px 0px rgba(255, 255, 255, 0.1);
    box-shadow: 10px 10px 16px 0px rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
}
 .login-form input[type="email"] {
    width: 100%;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid #525252;
    outline: none;
    color: #fff;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.09);
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    -moz-transition: 0.5s all;
    font-family: 'Montserrat', sans-serif;
}
h1 {
    font-size: 3em;
    letter-spacing: 5px;
    color: #fff;
    margin: 1em 0 1em;
    font-weight: 600;
}
.footer-social ul li {
    display: inline-block;
    margin-right: 5px;
}
i.icon_facebook {
    background: #3b5998;
}
i.icon_twitter {
    background: #1da1f2;
}
i.icon_dribbble {
    background: #ea4c89;
}
i.icon_g_plus {
    background: #dd4b39;
}
.footer-social {
    text-align: left;
    margin-top: 20px;
}
.footer-social ul li i {
    color: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
}
.login-form input[type="submit"] {
    background: #b52e31;
    color: #fff;
    font-size: 15px;
    border: none;
    text-transform: capitalize;
    border: 2px solid #b52e31;
    width: 45%;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    padding: 10px 0;
    letter-spacing: 2px;
    margin-top: 15px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    font-family: 'Montserrat', sans-serif;
  
}
input[type="submit"]:hover {
	background-color:#2292a7;
	border: 2px solid #2292a7;	
}
.w3_sub {
    text-align: left;
}
.w3_lb {
    text-align: left;
    margin-bottom: 20px;
}
.w3_soc h3 {
    font-size: 25px;
    text-align: left;
	color:#000;
}

.footer-agileits p {
    text-align: center;
    color: #fff;
    font-size: 14px;
    margin: 4em 0 1em;
    letter-spacing: 1.5px;
    display: block;
}
.footer-agileits p a:hover {
    color: #000;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
	-moz-transition:0.5s all;
}
.footer-agileits p a {
    text-decoration: underline;
    color: #fff;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
	-moz-transition:0.5s all;
}
/*-- //login --*/
::-webkit-input-placeholder{
	color:#000;
}

:-moz-placeholder { /* Firefox 18- */
   color: #adb2bd; 
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #adb2bd;  
}

:-ms-input-placeholder {  
   color: #adb2bd;  
}
/*--responsive--*/
@media screen and (max-width: 1080px){
.main-content-agileits {
    margin: 0 3vw;
}
}
@media screen and (max-width: 1024px){
.left-text-w3ls h3 {
    font-size: 1.5em;
}	
}
@media screen and (max-width: 900px){
.left-text-w3ls {
    width: 100%;
}
.login-w3l {
    width: 100%;
    margin-top: 15px;
    float: left;
}
h1 {
    margin: 0.5em 0 0.5em;
}	
}
@media screen and (max-width: 667px){
h1 {
    letter-spacing: 1px;
	font-size: 2.5em;
}	
}
@media screen and (max-width: 480px){
.left-text-w3ls h3 {
    font-size: 1.2em;
}
.left-text-w3ls p {
    font-size: 12px;
    letter-spacing: 0px;
}
h1 {
    font-size: 2em;
}	
}
@media screen and (max-width: 384px){
.w3_pad {
    padding: 2em 1em 0;
}
.footer-agileits p {
    margin: 2em 0 1em;
    line-height: 1.8em;
	font-size:13px;
	letter-spacing:1px;
}	
}
@media screen and (max-width: 320px){
.top-img-agileits-w3layouts h2 {
    font-size: 22px;
}
.top-img-agileits-w3layouts p {
    font-size: 13px;
}
.login-form input[type="submit"] {
    width: 60%;
}
.w3_soc {
    padding: 1.5em 1em 1.5em 2em;
}	
}
/*--responsive--*/
</style>
   -->




<!-- 张健康 -->
 <template>
    <div class="login">
        <section class="w3l-mockup-form">
        <h1>重工实验室辅助管理平台</h1>
        <div class="container">
           
            <div class="workinghny-form-grid">
                <div class="main-mockup">
                    <div class="alert-close">
                        <span class="fa fa-close"></span>
                    </div>
                    <div class="w3l_form align-self">
                        <div class="left_grid_info">
                            <img src="images/image.svg" alt="">
                        </div>
                    </div>
                    <div class="content-wthree">
                        <h2>Subscribe Now</h2>
                        <p>lets keep in touch! Please subscribe to our newsletter and stay updated </p>
                        <div style="height: 300px;">
                            <input type="text" class="text" name="text"    v-model="Number"  placeholder="Enter Your Number" >
                            <input type="password" class="text" name="password" v-model="Password"  placeholder="Enter Your PassWord" >
                            <button  class="inupbutton" @click="Login()">Sign in</button>
                        </div>
                        <div class="social-icons w3layouts">
                            <ul>
                                <li>
                                    <a href="#url" class="facebook"><span class="fab fa-facebook"></span> </a>
                                </li>
                                <li>
                                    <a href="#url" class="twitter"><span class="fab fa-twitter"></span> </a>
                                </li>
                                <li>
                                    <a href="#url" class="pinterest"><span class="fab fa-pinterest"></span> </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
      
        </div>
       
        <div class="copyright text-center">
            <p class="copy-footer-29">© 2020 Well Subscribe form. All rights reserved | Design by <a
                        href="https://w3layouts.com">JonJack</a></p>
        </div>
       
    </section>
    </div>
</template>
<script>

import service from '@/request';
import axios from 'axios';
   
export default {
        data() {
            return {
                Number:'',Password:'',
                overlaylong: 'overlaylong',
                overlaytitle: 'overlaytitle',
                disfiex: 0
            }
        },
        methods: {
           
            async Login() {
                try {
                    //发送登录请求
                    const response = await service.post(`User/Login`, {
                        num: this.Number,
                        password: this.Password
                    });
                    // const response = await service.post(`/User/Login`, {
                    //     num: '2199711',
                    //     password: '123456'
                    // });
                    console.log('1'); // 添加这一行以确认导航开始
                    // 检查响应状态
                    if (true) {
                        console.log('2'); // 添加这一行以确认导航开始
                        // 检查响应数据中的 outcome 字段
                        if (response.outcome) {
                            console.log(response); // 添加这一行以确认导航开始
                            // 存储用户信息
                            localStorage.setItem('userId', response.userId+"");
                            localStorage.setItem('roleName', response.roleName+"");
                            localStorage.setItem('userName', response.userName+"");
                            localStorage.setItem('token', response.token);

                            console.log('User information stored in localStorage'); // 添加这一行以确认信息已存储

                            // 打印用户信息
                            console.log(response.userId, response.userName, response.token);

                            // 跳转到首页
                            console.log('Navigating to /HelloWorld'); // 添加这一行以确认导航开始
                            this.$router.push({ path: '/HelloWorld' });
                            console.log('Navigation completed'); // 添加这一行以确认导航完成
                            return true;
                        } else {
                            alert("密码或者账户错误");
                            return false;
                        }
                    } else {
                        alert('登录失败，服务器响应状态码：' + response.status);
                        return false;
                    }
                } catch (error) {
                    console.error('登录失败', error);
                    alert('登录失败，请检查网络连接');
                    return false;
                }
            }
            
        }
    }
</script>
<style scoped>
/*
Author: W3layouts
Author URL: http://w3layouts.com
 */
 html {
    scroll-behavior: smooth;
}

body,
html {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

* {
    box-sizing: border-box;
}

.d-grid {
    display: grid;
}

.d-flex {
    display: flex;
    display: -webkit-flex;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

button,
input,
select {
    -webkit-appearance: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
}

button,
.btn,
select {
    cursor: pointer;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

ul {
    margin: 0;
    padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0
}

p {
    color: #666;
    font-size: 16px;
    line-height: 25px;
    opacity: .6;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.p-fixed {
    position: fixed;
}

.p-sticky {
    position: sticky;
}

.btn,
button,
.actionbg,
input {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
}

.btn:hover,
button:hover {
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
}

/*-- wrapper start --*/
.wrapper {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .wrapper {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .wrapper {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .wrapper {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .wrapper {
        max-width: 1140px;
    }
}

.wrapper-full {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/*-- //wrapper start --*/

/*-- form styling --*/
.w3l-mockup-form {
    position: relative;
    min-height: 100vh;
    z-index: 0;
    background: rgba(99, 194, 110, 0.1);
    padding: 40px 40px;
    justify-content: center;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
}

.container {
    max-width: 890px;
    margin: 0 auto;
}

.w3l_form {
    padding: 0px;
    flex-basis: 50%;
    -webkit-flex-basis: 50%;
    background: #00c16e;
    padding: 100px 50px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.content-wthree {
    flex-basis: 60%;
    -webkit-flex-basis: 60%;
    box-sizing: border-box;
    padding: 3em 3.5em;
    background: #fff;
    box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.1);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.w3l-workinghny-form .logo {
    text-align: center;
}

.w3l-mockup-form .main-mockup {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin: 40px 0;
}

.w3l-mockup-form .alert-close {
    cursor: pointer;
    height: 35px;
    width: 35px;
    line-height: 35px;
    position: absolute;
    right: -5px;
    top: -5px;
    background: #62c16e;
    border-radius: 50px;
    color: #fff;
    text-align: center;
}

.w3l-mockup-form form {
    margin-top: 30px;
    margin-bottom: 30px;
}

.social-icons {
    text-align: center;
}

.w3l-mockup-form h1 {
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    color: #3b3663;
}

.w3l-mockup-form h2 {
    display: inline-block;
    font-size: 25px;
    line-height: 35px;
    margin-bottom: 5px;
    font-weight: 600;
    color: #3b3663;
}

.w3l-mockup-form input[type="text"],
.w3l-mockup-form input[type="password"] {
    outline: none;
    margin-bottom: 15px;
    font-size: 16px;
    color: #999;
    text-align: left;
    padding: 14px 20px;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    border: 1px solid #e5e5e5;
}

.w3l-mockup-form button {
    font-size: 18px;
    color: #fff;
    width: 100%;
    background: #00c16e;
    border: none;
    padding: 14px 15px;
    font-weight: 500;
    transition: .3s ease;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -ms-transition: .3s ease;
    -o-transition: .3s ease;
}

.w3l-mockup-form button:hover {
    background: #4ca356;
}

.w3l-mockup-form .social-icons ul li {
    list-style: none;
    display: inline-block;
}

.w3l-mockup-form .social-icons ul li a {
    padding: 8px;
}

.w3l-mockup-form .social-icons ul li a:hover {
    opacity: 0.8;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
}

.w3l-mockup-form .social-icons ul span.fa {
    color: #696687;
    font-size: 18px;
    opacity: .8;
}

.w3l-mockup-form .social-icons ul li a.facebook span {
    color: #3b5998;
}

.w3l-mockup-form .social-icons ul li a.twitter span {
    color: #1da1f2;
}

.w3l-mockup-form .social-icons ul li a.pinterest span {
    color: #e60023;
}


.copyright p {
    text-align: center;
    font-size: 17px;
    line-height: 26px;
    color: #607863;
    opacity: 1;
}

p.copy-footer-29 a {
    color: #517856;
}

p.copy-footer-29 a:hover {
    color: #00c16e;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
}


/*-- responsive design --*/

@media (max-width:736px) {
    .w3l-mockup-form .main-mockup {
        flex-direction: column;
    }

    .w3l_form {
        order: 2;
        padding: 50px;
        border-radius: 0;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .content-wthree {
        order: 1;
        border-radius: 0;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
}

@media (max-width:568px) {
    .w3l-mockup-form h1 {
        font-size: 30px;
    }

    .w3l-mockup-form .main-mockup {
        margin: 30px 0;
    }

    .content-wthree {
        padding: 2.5em;
    }
}

@media (max-width: 415px) {
    .w3l-mockup-form {
        padding: 40px 30px;
    }

}

@media (max-width:384px) {
    .w3l-mockup-form {
        padding: 30px 15px;
    }

    .content-wthree {
        padding: 2em;
    }

    .w3l-mockup-form h1 {
        font-size: 28px;
    }

    .w3l-mockup-form h2 {
        font-size: 22px;
        line-height: 32px;
    }

    .copyright p {
        font-size: 16px;
    }
}

/*-- //responsive design --*/
/*-- //form styling --*/
</style> 





<!-- <template>
    <div class="center">
        <h1>重工实验室辅助管理平台</h1>
        <div class="logon">
            <div :class="overlaylong">
                <div class="overlaylong-Signin" v-if="disfiex == 0">
                    <h2 class="overlaylongH2">Sign in</h2>
                    <input type="text" v-model="Number" placeholder="Number">
                    <input type="password" v-model="Password" placeholder="Password">
                    <h3>Forgot your password?</h3>
                    <button class="inupbutton" @click="Login()">Sign in</button>
                </div>
                <div class="overlaylong-Signup" v-if="disfiex == 1">
                    <h2 class="overlaylongH2">Registered Account</h2>
                    <input type="text" placeholder="user">
                    <input type="text" placeholder="password">
                    <button class="inupbutton">Sign up</button>
                </div>
 
            </div>
            <div :class="overlaytitle">
                <div class="overlaytitle-Signin" v-if="disfiex == 0">
                    <h2 class="overlaytitleH2">Hello,Friend!</h2>
                    <p class="overlaytitleP">
                        Enter your personal details and start journey with us
                    </p>
                    <div class="buttongohs" @click="Signin">Sign up</div>
                </div>
                <div class="overlaytitle-Signup" v-if="disfiex == 1">
                    <h2 class="overlaytitleH2">Welcome Back!</h2>
                    <p class="overlaytitleP">To keep connected with us please login with your personal info</p>
                    <div class="buttongohs" @click="Signup">Sign in</div>
                </div>
            </div>
        </div>
 
    </div>
</template>
 
<script>

import service from '@/request';
   
export default {
        data() {
            return {
                Number:'',Password:'',
                overlaylong: 'overlaylong',
                overlaytitle: 'overlaytitle',
                disfiex: 0
            }
        },
        methods: {
           
            async Login() {
                try {
                    // 发送登录请求
                    // const response = await service.post(`https://localhost:7166/api/User/Login`, {
                    //     num: this.Number,
                    //     password: this.Password
                    // });
                    const response = await service.post(`https://localhost:7166/api/User/Login`, {
                        num: '2199710',
                        password: '123456'
                    });
                    console.log('1'); // 添加这一行以确认导航开始
                    // 检查响应状态
                    if (true) {
                        console.log('2'); // 添加这一行以确认导航开始
                        // 检查响应数据中的 outcome 字段
                        if (true) {
                            console.log(response); // 添加这一行以确认导航开始
                            // 存储用户信息
                            localStorage.setItem('userId', response.userId);
                            localStorage.setItem('userName', response.userName);
                            localStorage.setItem('token', response.token);

                            console.log('User information stored in localStorage'); // 添加这一行以确认信息已存储

                            // 打印用户信息
                            console.log(response.userId, response.userName, response.token);

                            // 跳转到首页
                            console.log('Navigating to /HelloWorld'); // 添加这一行以确认导航开始
                            this.$router.push({ path: '/HelloWorld' });
                            console.log('Navigation completed'); // 添加这一行以确认导航完成
                            return true;
                        } else {
                            alert("密码或者账户错误");
                            return false;
                        }
                    } else {
                        alert('登录失败，服务器响应状态码：' + response.status);
                        return false;
                    }
                } catch (error) {
                    console.error('登录失败', error);
                    alert('登录失败，请检查网络连接');
                    return false;
                }
            },
            Signin() {
                this.overlaylong = "overlaylongleft"
                this.overlaytitle = "overlaytitleright"
                setTimeout(() => {
                    this.disfiex = 1
                }, 200)
            },
            Signup() {
                this.overlaylong = "overlaylongright"
                this.overlaytitle = "overlaytitleleft"
 
                setTimeout(() => {
                    this.disfiex = 0
                }, 200)
 
            }
        }
    }
</script>
<style scoped>
    .center {
        width: 1650px;
        height: 940px;
        background-image: url('./Image/VCG211300614418.jpg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
 
    h1 {
        font-size: 50px; 
       
        color: rgb(255, 255, 255);
    }
    .h3 {
        font-size: 50px;
        
    }
 
    .logon {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
        /* position: relative;
        overflow: hidden; */
        width: 868px;
        max-width: 100%;
        min-height: 580px;
       
        display: flex;
        background: -webkit-linear-gradient(right, #f3f35f, #86dbca);
    }
 
    .overlaylong {
        border-radius: 10px 0 0 10px;
        width: 50%;
        height: 100%;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    .overlaylongleft {
        border-radius: 0px 10px 10px 0px;
        width: 50%;
        height: 100%;
        background-color: #fff;
        transform: translateX(100%);
        transition: transform 0.6s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    .overlaylongright {
        border-radius: 10px 0 0 10px;
        width: 50%;
        height: 100%;
        background-color: #fff;
        transform: translateX(0%);
        transition: transform 0.6s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    .overlaytitle {
        border-radius: 0px 10px 10px 0px;
        width: 50%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
 
    .overlaytitleH2 {
        font-size: 30px;
        color: #fff;
        margin-top: 20px;
    }
 
    .overlaytitleP {
        font-size: 15px;
        color: #fff;
        margin-top: 20px;
    }
 
    .overlaytitleleft {
        border-radius: 0px 10px 10px 0px;
        width: 50%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(0%);
        transition: transform 0.6s ease-in-out;
    }
 
    .overlaytitleright {
        border-radius: 0px 10px 10px 0px;
        width: 50%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(-100%);
        transition: transform 0.6s ease-in-out;
    }
 
    .overlaytitle-Signin {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
 
    .overlaytitle-Signup {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
 
    .buttongohs {
        width: 180px;
        height: 40px;
        border-radius: 50px;
        border: 1px solid #fff;
        color: #fff;
        font-size: 15px;
        text-align: center;
        line-height: 40px;
        margin-top: 40px;
    }
 
    .overlaylongH2 {
        font-size: 25px;
        color: black;
        /* width: 250px; */
    }
 
    .overlaylong-Signin {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
 
    .overlaylong-Signup {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
 
    input {
        background-color: #eee;
        border: none;
        padding: 12px 15px;
        margin: 10px 0;
        width: 240px;
    }
    h3{
        font-size: 10px;
        margin-top: 10px;
        cursor: pointer;
    }
    .inupbutton{
        background-color: #29eac4;
        border: none;
        width: 180px;
        height: 40px;
        border-radius: 50px;
        font-size: 15px;
        color: #fff;    
        text-align: center;
        line-height: 40px;
        margin-top: 30px;
    }
        
</style>  -->